<template>
    <div>
        <header-one></header-one>
                        <el-button type="primary" icon="el-icon-d-arrow-left" @click="handleReturn"
                                   style="margin-top: 5px;margin-left: 5px;margin-bottom: 5px">返回主页
                        </el-button>
        <div class="container">
            <div style="margin-bottom: 5px">训练记录</div>
            <div>
                <div class="handle-box">
                    <el-input v-model="query.ptNm" placeholder="姓名" class="handle-input mr10" @keyup.enter.native="handleSearch" style="width: 200px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 30px">搜索</el-button>
                    <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>

                </div>
                <el-table
                        :data="tableData"
                        border
                        class="table"
                        height="300px"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                >
                    <el-table-column prop="ptId" label="患者ID" align="center"></el-table-column>
                    <el-table-column prop="ptNm" label="姓名" align="center" width="80" ></el-table-column>
                    <el-table-column prop="ptAge" label="年龄" align="center" width="80" ></el-table-column>
                    <el-table-column prop="trainStartTm" label="训练开始时间"  align="center"></el-table-column>
                    <el-table-column prop="trainEndTm" label="训练结束时间"  align="center"></el-table-column>
                    <el-table-column  prop="trainingDuration" label="训练时长/分钟" align="center" width="90"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getTrainList} from '../api/trainlist';
    export default {
        name: 'patient',
        data() {
            return {
                query: {
                    ptNm: '',
                    pageIndex: 1,
                    pageSize: 4
                },
                tableData: [],
                pageTotal: 0,
            }
        },
        created() {
            this.getData();
        },
        methods:{
            // 获取后台数据
            getData() {
                getTrainList(this.query).then(res => {
                    if (res.success === true){
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                console.log("1111",this.query);
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.ptNm = "";
                this.getData();
            },
            handleReturn(){
                this.$router.push('/main');
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
        }
    }
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
